<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>document</title>

</head>

<body>
    <table border="1" width="500" height="50" align="center" id="tbl" style="border-collapse: collapse">

            <tr>
                <td>1</td>
                <td>张三</td>
                <td>22</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>25</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>26</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>29</td>
            </tr>
            <tr>
                <td>5</td>
                <td>田七</td>
                <td>30</td>
            </tr>
            <tr>
                <td>6</td>
                <td>汾九</td>
                <td>20</td>
            </tr>
    </table>
</body>
<script>
    window.onload = function () {
        //1.获取表格
        var tblEle = document.getElementById("tbl");
        //2.获取表格中tbody里面的长度（行数）
        var len = tblEle.rows.length;
        //alert(len);
        //3.对tbody里面的行进行遍历
        for (var i = 0; i < len; i++) {
            if (i % 2 == 0) {
                //4.对偶数设置背景色
                tblEle.rows[i].style.backgroundColor = "springgreen";
            } else {
                //5.对奇数设置背景色
                tblEle.rows[i].style.backgroundColor = "pink";
            }
        }
    }
</script>

</html>